<template>
  <div class="home">
    <!-- 主体地图显示 -->
    <el-container style="height: 30%;">
      <el-main>
        <map-view></map-view>
      </el-main>
      <el-aside v-if="showWarningInfo" width="500px">
        <vdr class="vdr"   @resizing="resizeWidth" :draggable="false">
          <warning-view></warning-view>
        </vdr>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
// 引入地图组件
import mapView from '@/views/Comprehensive/Alert/AlertMap.vue'
// 引入报警组件
import warningView from '@/views/Comprehensive/Alert/AlertData.vue'

export default {
  components: {
    'map-view': mapView,
    'warning-view': warningView,
  },
  data () {
    return {
      mainWidth: 0,
      asideWidth: 0,
      showWarningInfo: true
    }
  },
  mounted () {
    this.mainWidth = document.querySelector('.el-main').clientWidth
    this.asideWidth = document.querySelector('.el-aside').clientWidth
  },
  methods: {
    // 报警列表信息缩放
    resizeWidth (x) {
      document.querySelector('.el-aside').style.width = this.asideWidth - x + 'px'
      document.querySelector('.el-main').style.width = this.mainWidth + x + 'px !important'
    },
  }
}
</script>

<style scoped lang="less">
.home {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.el-aside {
  // height: 300px;
  max-width: 1650px;
  overflow: hidden;
  /deep/.handle-tm {
    display: none !important;
  }
}
.vdr {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  // bottom: 0 !important;
  height: 100% !important;
  width: 100% !important;
}
</style>
